<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>真选起始页</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="plugin/layui/css/layui.css"/>
</head>
<body>
<!--oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty() onselect=document.selection.empty()-->
<div id="box-bg" class="box-main">
    <img src="img/th.jpg" />
    <div id="cover"></div>
</div>
<div id="content-box" class="box-main">
    <div id="input-box" class="centre-box">
        <input id="search-input" type="text" placeholder="搜索" autofocus />
        <a id="search-btn" href="javascript:void(0)" class="layui-icon layui-icon-search" style="font-size: 30px; color: rgb(0,112,201);"></a>
    </div>
    <div id="setting-box">
        <a href="login.html" onclick="return userClick(this);" id="user-button" class="openlogin layui-icon layui-icon-username" title="用户">
            <div id="user-setting" class="settings-none">
                <div id="menuTextUsername" class="userMenuItem">
                    <span></span>
                    账号管理
                </div>
                <div id="logout" class="userMenuItem">退出登录</div>
            </div>
        </a>
        <div id="set-button" class="layui-icon layui-icon-set-fill" title="设置">
            <div id="menuSettings" class="settings-none">
                <div class="userMenuItem" id="setMenuGeneral">编辑快捷书签</div>
                <a href="zhenxuan/pages.html" class="userMenuItem" id="favoritebox" style="color: black;display: block;">
                    前往收藏夹
                </a>
                <div class="userMenuItem" id="setMenuSearchEngPref">搜索引擎偏好</div>
                <div class="userMenuItem" id="setMenuBgPref">背景图像偏好</div>
                <div class="userMenuItem" id="setMenuDonate">捐助我</div>
                <div class="userMenuItem" id="setMenuFeedback">反馈</div>
            </div>
        </div>
    </div>
    <div id="favorite-box" class="centre-box">
        <p>
            自定义你喜爱的网站，拖动可排序
            <span id="add-favorite">
                <a style="color: #8a9baa;"></a>
                <i style="color: rgb(0,0,0);font-size: 16px;" class="layui-icon layui-icon-addition"></i>
            </span>
        </p>
        <ul>
            <a v-for="item in list" class="move-favorite" :href="item.url" onclick="return clickShortcut();" target="_blank">
                <div>
                    <div class="icon-box">
                        <span class="layui-icon layui-icon-unlink" @click="deleteFavorite(item.id)"></span>
                        <span class="layui-icon layui-icon-edit" @click="getOne(item.id)"></span>
                    </div>
                    <img :src="item.img" onerror="this.src= 'img/null.png';" />
                </div>
                <span>{{item.name}}</span>
            </a>
        </ul>
        <button id="cancel-btn" type="button" class="layui-btn layui-btn-primary">取消</button>
<!--        <button id="save-btn" type="button" class="layui-btn layui-btn-normal">保存</button>-->
    </div>
</div>
<!--新增收藏-->
<div id="siteSetBlackBg">
    <div id="newSiteSetBox" style="margin-top: -150px;">

        <div class="newSiteSetListBox" style="margin-top:30px; ">
            <div class="nssBoxName">网址</div>
            <input id="nssUrlInput" maxlength="3000" type="text" placeholder="输入或粘贴网址Url" name="">
        </div>

        <div class="newSiteSetListBox">
            <div class="nssBoxName">名称</div>
            <input id="nssNameInput" maxlength="20" type="text" placeholder="输入网站名称(空自动识别)" name="">
        </div>
        <div class="newSiteSetListBox">
            <div class="nssBoxName">图片</div>
            <input id="imgInput" type="text" placeholder="输入图片地址(空自动识别)" name="">
        </div>
        <div id="nssConfirmBox">
            <div id="nssCancel">取消</div>
            <div id="nssConfirm">确认</div>
        </div>
    </div>
</div>
</body>
<script src="plugin/jquery/jquery-3.3.1.min.js"></script>
<script src="plugin/jquery/jquery-ui.min.sortable.js"></script>
<script src="plugin/layui/layui.js"></script>
<script src="plugin/util.js"></script>
<script src="plugin/vuejs-2.5.16.js"></script>
<script src="plugin/axios-0.18.0.js"></script>
<script src="plugin/vue/favorite.js"></script>
<script>

function userClick(e){
    let isLogin = $("#menuTextUsername").data("isLogin")===true;
    return !isLogin;
}

function clickShortcut(){
    let display = $("#favorite-box>p").css("display");
    if ( display==="block" ){
        return false;
    }
    return true;
}

$(function () {
    //启用layer
    layui.use('layer', function(){
        var layer = layui.layer;
    });

    $("#logout").click(function () {
        location.href = "/user/signOut";
    })

    //确定按钮，持久化到数据库
    $("#nssConfirm").data("type","insert");
    $("#nssConfirm").click(function () {
        if ($(this).data("type")==="insert") {
            favoriteVue.addBookmark();
        }else{
            favoriteVue.updateFavorite();
        }
    })

    //获得登录的用户
    axios.get("user/getLoginUser")
        .then((resp)=>{
           let data = resp.data;
            if (data!=null && !$.emptyString(data) ){
                //已经登录
                $("#menuTextUsername>span").text(data.name);
                $("#menuTextUsername").data("isLogin",true);

                //渲染元素
                favoriteVue.getUserBookmark();
            }
        });

    //点击添加按钮
    $("#add-favorite").click(function () {
        $("#siteSetBlackBg").css("display","block");
        $("#newSiteSetBox").fadeIn(300);
    })

    //取消按钮
    $("#nssCancel").click(function () {
        //清空输入框
        $("#nssNameInput").val("");
        $("#imgInput").val("");
        $("#nssUrlInput").val("");
        //改为新增
        $("#nssConfirm").data("type","insert");
        $("#siteSetBlackBg").fadeOut(300,function () {
            $("#newSiteSetBox").css("display","none");
        });
    })

    //编辑快捷链接
    $("#setMenuGeneral").click(function () {
        $(".icon-box>span").css("display","inline-block");
        $("#favorite-box>p").css("display","block");
        $("#save-btn").css("display","inline-block");
        $("#cancel-btn").css("display","inline-block");
        //排序功能
        // $("#favorite-box>ul").sortable();
    })

    //保存按钮
    $("#save-btn,#cancel-btn").click(function () {
        $(".icon-box>span").css("display","none");
        $("#favorite-box>p").css("display","none");
        $("#save-btn").css("display","none");
        $("#cancel-btn").css("display","none");
        // $("#favorite-box>ul").sortable('destroy');
    })

    $("#user-button").click(function (e) {
        //已经登录，弹出提示框
        let isLogin = $("#menuTextUsername").data("isLogin")===true;
        if (isLogin){
            let children = $(this).children(".settings-none");
            $(".settings-none").not(children).removeClass("settings-show");
            if ( children.hasClass("settings-show") ) {
                children.removeClass("settings-show");
            }else {
                children.addClass("settings-show");
            }
        }
        e.stopPropagation();
    })

    //设置按钮的点击
    $("#set-button").click(function (e) {
        let children = $(this).children(".settings-none");
        $(".settings-none").not(children).removeClass("settings-show");
        if ( children.hasClass("settings-show") ) {
            children.removeClass("settings-show");
        }else {
            children.addClass("settings-show");
        }
        e.stopPropagation();
    })

    $("#content-box").click(function () {
        $(".settings-none").removeClass("settings-show");
    })

    //搜索按钮的点击
    $("#search-btn").click(function () {
        let keyword = $("#search-input").val();
        window.open("https://www.baidu.com/baidu?&wd="+keyword);
    })
    
    //按下回车键
    $("#search-input").keypress(function (e) {
        let keyNum = (e.keyCode ? e.keyCode : e.which);
        if (keyNum===13){
            $("#search-btn").trigger("click");
        }
    })
})


</script>
</html>